<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <jsp:include page="commom.jsp"/>

    <!-- Bootstrap 的 CSS 文件 -->

    <title>Management</title>
    <script>
        function gotoPage(page) {
            var searchtype=$("#searchtype").val();
            var searchvalue=$("#searchvalue").val();
            if(searchtype!=''&&searchvalue!=''){
                window.location.href="/user/manage?currentPage="+page+"&searchtype="+searchtype+"&searchvalue="+searchvalue;
            }else {
                window.location.href="/user/manage?currentPage="+page;
            }

        }
        function delcfm(id) {
            if (!confirm("确认要删除？")) {
                window.event.returnValue = false;
            }else{
                window.location.href="/user/delete?id="+id;
                alert("删除成功");
            }
        }
        function edicfm(id) {
            window.location.href="/user/edit_by_id?id="+id;
        }
        function addcfm() {
            window.location.href="/user/adduser";
        }
    </script>
</head>
<body>
<jsp:include page="top.jsp"></jsp:include>
<div class="container-fluid" align="center">
    <div class="row">
        <%--        左边导航--%>
        <jsp:include page="left.jsp"/>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
            <br>
            <div>

                <div class="input-group mb-3">
<%--                    selectpicker--%>

                    <select class="btn btn-outline-secondary dropdown-toggle" name="searchtype" id="searchtype">
                        <option value="">请选择查询类型</option>
                        <option value="1" <c:if test="${searchtype==1}">selected</c:if>>用户名</option>
                        <option value="2" <c:if test="${searchtype==2}">selected</c:if>>昵称</option>
                    </select>&nbsp;
                    <input type="text" class="form-control" placeholder="请输入关键字" aria-label="请输入关键字" aria-describedby="button-addon2"
                    value="${searchvalue}" name="searchvalue" id="searchvalue">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" onclick="gotoPage(1)" id="button-addon2">搜索</button>
                    </div>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                    <button type="button" class="btn btn-outline-info" name="add" onclick="addcfm()">添加用户</button>
                </div>
            </div>


            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <div class="table-responsive">


    <table class="table">
        <thead class="thead-light">
        <tr>
            <th scope="col">用户ID</th>
            <th scope="col">用户名</th>
            <th scope="col">昵称</th>
            <th scope="col">电话</th>
            <th scope="col">创建日期</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${userList}" var="user">
            <tr scope="row">
                <td>${user.id}</td>
                <td>${user.username}</td>
                <td>${user.nickname}</td>
                <td>${user.phone}</td>
                <td>${user.createdate}</td>
                <td>
                    <button type="button" name="edibut" value="修改" onclick="edicfm(${user.id})" class="btn btn-outline-success">修改</button>
                    <button type="button" name="delbut" value="删除" onclick="delcfm(${user.id})" class="btn btn-outline-danger">删除</button>

                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <br>
    <span>总记录：${total}， <span>总页数：${pageTotal}，</span> <span>当前页：${currentPage}</span>
    <nav aria-label="Page navigation">

        <ul class="pagination">
            <c:if test="${currentPage>1}">
                <li class="page-item">
                <a class="page-link" onclick="gotoPage(${currentPage-1})" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
                </li>
            </c:if>
            <c:if   test="${currentPage<=1}">
                <li class="page-link">
                    <span aria-hidden="true">&laquo;</span>
                </li>
            </c:if>
            <c:forEach begin="1" end="${pageTotal}" var="page">
                <c:if test="${page==currentPage}">
                    <li class="page-item"><a class="page-link" href="javascript:void(0);">${page}</a></li>
                </c:if>
                <c:if test="${page!=currentPage}">
                    <li class="page-item"><a class="page-link" onclick="gotoPage(${page})">${page}</a></li>
                </c:if>
            </c:forEach>
            <c:if test="${currentPage<pageTotal}">
                <li class="page-item">
                <a class="page-link" onclick="gotoPage(${currentPage+1})" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
                </li>
            </c:if>
            <c:if test="${currentPage>=pageTotal}">
                <li class="page-link">
                    <span aria-hidden="true">&raquo;</span>
                </li>
            </c:if>

        </ul>
    </nav>
                </div>
            </div>

            <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>

        </main>
    </div>
</div>


</body>
</html>
